<!--
  选择企业用户
 -->
<template>
  <!-- 搜索工作栏 -->
  <el-dialog
    title="请选择企业"
    :visible.sync="dialogVisible"
    width="80%"
    custom-class="choose-student-pop"
    append-to-body
    @close="resetQuery"
  >
    <div style="margin-bottom: 20px;">
      <!-- 搜索工作栏 -->
      <el-form
        v-show="showSearch"
        ref="queryForm"
        :model="queryParams"
        size="small"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="姓名" prop="nickname">
          <el-input
            v-model="queryParams.nickname"
            placeholder="请输入企业申请人姓名"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="企业名称" prop="companyName">
          <el-input
            v-model="queryParams.companyName"
            placeholder="请输入企业名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="认证状态" prop="authorizedStatus">
          <el-select
            v-model="queryParams.authorizedStatus"
            placeholder="请选择企业状态"
            clearable
            size="small"
          >
            <el-option
              v-for="dict in this.getDictDatas(DICT_TYPE.AUTHORIZED_STATUS)"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <!-- todo 手机号搜索报错 -->
        <el-form-item label="手机号" prop="phoneNumber">
          <el-input
            v-model="queryParams.phoneNumber"
            placeholder="请输入手机号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <!-- todo 调用企业角色接口，查看符合角色的企业用户 -->
        <el-form-item label="角色" prop="roleType">
          <el-select
            v-model="queryParams.roleType"
            placeholder="请选择角色"
            clearable
            size="small"
          >
            <el-option label="企业管理员" value="tenant_admin">企业管理员</el-option>
            <el-option label="普通员工" value="company_user">普通员工</el-option>
            <el-option label="游客" value="gust">游客</el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="handleQuery"
          >搜索</el-button>
        </el-form-item>
      </el-form>
      <div style="margin: 10px 0">
        <span style="margin-right:10px;">当前结果:{{ selectArr.length === 0 ? '无' : '' }}</span>
        <el-tag
          v-for="(tag, jj) in selectArr"
          :key="jj"
          closable
          style="margin: 2px 5px;"
          @close="handleDelete(tag)"
        >
          {{ tag.companyName || '--' }}
        </el-tag>
      </div>
      <!-- 列表 -->
      <el-table
        ref="companyTable"
        v-loading="loading"
        :data="list"
        :row-key="getRowKey"
        @selection-change="handleChange"
      >
        <el-table-column
          type="selection"
          width="55"
          :reserve-selection="true"
        />
        <el-table-column label="企业名称" align="center" prop="companyName" />
        <el-table-column label="手机号" align="center" prop="phoneNumber">
          <template slot-scope="scope">
            {{ scope.row.phoneNumber | decodeMobile }}
          </template>
        </el-table-column>
        <el-table-column label="认证状态" align="center" prop="authorizedStatus">
          <template slot-scope="scope">
            <span>{{
              scope.row.authorizedStatus === null
                ? "--"
                : authStatus[scope.row.authorizedStatus]
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="角色" align="center" prop="roleType">
          <template slot-scope="scope">
            <span>
              {{ scope.row.roleType === 'tenant_admin' ? '企业管理员' : '' }}
              {{ scope.row.roleType === 'company_user' ? '普通员工' : '' }}
              {{ scope.row.roleType === 'gust' ? '游客' : '' }}
            </span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNo"
        :limit.sync="queryParams.pageSize"
        :page-sizes="[10, 20,30,40,50,100,200, 500]"
        @pagination="getList"
      />
    </div>
    <div class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" style="margin-left: 10px" @click="handleConfirm">确 认</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {
  getCompanyUser
} from '@/api/school-admin-api/userManage/company/index.js'
import { encryptDes } from '@/utils/crypto'
import businessAreaData from '@/utils/businessAreaData.js'
import {
  provinceAndCityData
} from '@/utils/frontDataDict.js'

export default {
  name: 'ChooseCompanyPop',
  components: {
  },
  data() {
    return {
      // 企业行业类型数据，二级联动
      businessAreaData: businessAreaData,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 企业管理列表
      list: [],
      // 弹出层标题
      title: '',
      provinceAndCityData,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        nickname: null, // 申请人名称
        phoneNumber: null, // 手机号
        companyName: null, // 公司名称
        authorizedStatus: null, // 认证状态
        roleType: null // 账号类型
      },
      selectArr: [],
      authStatus: {
        authorized: '已认证',
        unauthorized: '未认证',
        reject: '认证被驳回'
      },
      dialogVisible: false
    }
  },
  methods: {
    getRowKey(row) {
      return 'resume' + row.userId
    },
    handleDelete(item) {
      const list = this.selectArr.filter(k => item.userId !== k.userId)
      this.$set(this, 'selectArr', list)
      this.$refs.companyTable.toggleRowSelection(item, false)
    },
    // 多选
    handleChange(val) {
      this.selectArr = [...val]
      console.log('选中企业companyId>>>', this.selectArr)
    },
    /**
     * 打开选择企业弹窗
     * @param {Array} result 选中id数组 int array
     */
    open() {
      this.dialogVisible = true
      this.selectArr = []
      this.queryParams = this.$options.data().queryParams
      this.getList()
    },
    handleConfirm() {
      this.$emit('handleChoose', this.selectArr.map(item => item.userId))
      this.dialogVisible = false
    },
    /** 查询列表 */
    getList() {
      this.loading = true
      // 处理查询参数
      const params = {}
      for (const key in this.queryParams) {
        if (this.queryParams[key] !== null) {
          params[key] = this.queryParams[key]
        }
      }
      if (params.phoneNumber) {
        params.phoneNumber = encryptDes(params.phoneNumber)
      }
      // 执行查询
      getCompanyUser(params).then((response) => {
        this.list = response.data.list
        this.total = response.data.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.selectArr = []
      this.$refs.companyTable.clearSelection()
      this.handleQuery()
    }
  }
}
</script>
<style lang="scss">
.dialog-footer {
  width: 100% !important;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
}
</style>
